<template>
    <div class="srtting">
        <header>
            <router-link to="/mobile/myhome"><</router-link>
            <h3>设置</h3>
        </header>
		<router-link to="/mobile/updateuser">
		<div class="user">
			<div class="img">
				<img  v-show="$store.state.img!=''" :src="`${this.$ip}/api/public/showimg/${$store.state.img}`"/>
				<img v-show="$store.state.img==''" src="../../../assets/img/mobile/user-logo-004.png"/>
			</div>
			<div class="text">
				<span>个人信息</span>
				<span>></span>
			</div>
		</div>
		</router-link>
		<router-link to="/mobile/myaddr">
		<div class="addr">
			<aside>
				<h3>收货地址</h3>
				<span>></span>
			</aside>
		</div>
		</router-link>
		<router-link to="/mobile/updateuserpwd">
		<div class="pwd">
			<aside>
				<h3>修改密码</h3>
				<span>></span>
			</aside>
		</div>
		</router-link>
		<div class="info">
			<div class="d1">
				<aside>
				<h3>允许个性化推荐</h3>
				<el-switch
				  v-model="value1"
				  active-color="#13ce66"
				  inactive-color="#989898">
				</el-switch>
				</aside>
			</div>
			<div class="d1">
				<aside>
				<h3>允许推送通知</h3>
				<el-switch
				  v-model="value2"
				  active-color="#13ce66"
				  inactive-color="#989898">
				</el-switch>
				</aside>
			</div>
			<div class="s">
				<aside>
					<h3>清除缓存</h3>
					<span>></span>
				</aside>
			</div>
			<div class="s">
				<aside>
					<h3>意见反馈</h3>
					<span>></span>
				</aside>
			</div>
			<div class="s">
				<aside>
					<h3>个人信息清单</h3>
					<span>></span>
				</aside>
			</div>
		</div>
		<div class="logout">
			<span v-show="$store.state.name!=''" @click="logout()">退出登录</span>
			<router-link to="/mobile/login"><el-button v-show="$store.state.name==''" type="success">登录</el-button></router-link>
		</div>
    </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
    name:'UserSetting',
    data(){
        return{
            value1: true,
			value2: true
        }
    },
    methods:{
		...mapActions(['remove']),
		//退出登录
		logout(){
			this.remove();
			this.$router.push({path:'/mobile/myhome'})
		}
    },
    mounted(){
		
	}
}
</script>

<style scoped>
a{
	color: black;
	margin: 0px;
	padding: 0px;
}
.srtting{
	width: 100%;
	background-color: #efefef;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.srtting header{
	width: 96%;
	line-height: 3rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.srtting header h3{
	margin-left: 10rem;
}
.srtting header a {
	font-size: 1.8rem;
	line-height: 3rem;
	color: #000000;
}
.srtting .user{
	width: 100%;
	height: 8rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	background-color: white;
	margin-top: 1rem;
}
.user .img{
	width: 5rem;
	height: 5rem;
	margin-left: 0.5rem;
}
.user .img img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.user .text{
	width: 70%;
	margin-left: 1rem;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.srtting .addr{
	width: 100%;
	height: 3rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	background-color: white;
}
.srtting .addr aside{
	width: 96%;
	margin: 0 auto;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.srtting .addr aside span{
	font-size: 20px;
	margin-right: 0.7rem;
}
.srtting .pwd{
	width: 100%;
	height: 3rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	background-color: white;
	margin-top: 1rem;
	border-radius: 0.5rem;
}
.srtting .pwd aside{
	width: 96%;
	margin: 0 auto;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.srtting .pwd aside span{
	font-size: 20px;
	margin-right: 0.7rem;
}
.srtting .info{
	width: 100%;
	height: 18rem;
	border-radius: 0.5rem;
	background-color: white;
}
.srtting .info .d1{
	width: 98%;
	height: 3rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	margin-top: 1rem;
	border-radius: 0.5rem;
}
.srtting .info .d1 aside{
	width: 96%;
	margin: 0 auto;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.srtting .s{
	width: 98%;
	margin: 0 auto;
	display: flex;
	margin-top: 1.4rem;
	align-items: center;
}
.srtting .s aside{
	width: 96%;
	margin: 0 auto;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.srtting .s aside span{
	font-size: 20px;
	margin-right: 0.7rem;
}
.srtting .logout{
	width: 100%;
	margin: 0 auto;
	height: 3rem;
	line-height: 3rem;
	margin-top: 1rem;
	text-align: center;
	font-size: 20px;
	color: #ff5500;
	border-radius: 0.5rem;
	background-color: white;
}
.srtting .logout .el-button{
	width: 200px;
	color: #67c23a;
	background-color: white;
}
</style>
